<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/js/layui/css/layui.css">
<link rel="stylesheet" href="/js/zTree/css/metroStyle/metroStyle.css">
</head>
<body>
	<div class="layui-col-lg8 layui-col-lg-offset2" style="margin-top: 1%">
		<span
			style="font-size: 2em; margin: 30px auto; display: block; text-align: center">分配角色</span>
		<div id="transfer"
			style="width: 500px; display: block; margin: 0 auto;"></div>
		<div style="text-align: center; width: 100%; margin-top: 30px;">
			<button id="submit" class="layui-btn layui-btn-normal">确定</button>
		</div>
	</div>
</body>
<script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/js/commentUtils.js"></script>
<script type="text/javascript" src="/js/layui/layui.js"></script>
<script type="text/javascript" src="/js/zTree/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
	layui.use([ 'transfer' ], function() {
		var transfer = layui.transfer;
		utils.getUrl("/sys/userRole/rolelist", {
			"userId" : "[[${userId}]]"
		}, function(res) {
			if (res.code == 0) {
				transfer.render({
					elem : '#transfer',
					id : "transfer",
					title : [ "为拥有", "已拥有" ],
					data : res.data.roleData,
					value : res.data.hasRole
				});
			} else {
			}
		});
		$("#submit").on("click", function() {
			var getData = transfer.getData('transfer');
			var roleIds = [];
			for (var i = 0; i < getData.length; i++) {
				roleIds.push(getData[i].value);
			}
			var postData = {
				'roleIds' : roleIds,
				'userId' : "[[${userId}]]"
			}
			utils.postUrl("/sys/userRole", postData, function(res) {
				if (res.code == 0) {
					parent.layer.msg("权限分配成功!");
				} else {
					parent.layer.msg(res.msg);
				}
				var index = parent.layer.getFrameIndex(window.name);
				parent.layer.close(index);
			});
		});
	});
</script>
</html>